@charset "utf-8";
/* CSS Document */
body{
    background-color: #DDB872;
}
*{
	margin:0;
	padding:0;
}
button{
	border:none;
	background-color:none;
}
.bg{
	position:relative;
}
ul{
    list-style:none;
}
ul li{
    list-style:none;
    float:left;
    width:31%;
    padding:0 1%;
}
.head{
	position:absolute; 
	top:0; 
	width:100%; 
	top:22%;
}
.headBtn{
	text-align:center; 
	width:200px; 
	margin:0 auto;
	overflow:hidden;
}
#appDown{
	background-image:url(../images/welcomback.png); 
	background-size:83px 39px;
	width:83px; 
	height:39px; 
	margin-right:17px; 
	float:left;
}
#net{
	background-image: url(../images/setup.png); 
	background-size:83px 39px;
	width:83px; 
	height:39px;
	margin-left:17px; 
	float:left;
}
.declare{
	color:#8d8d8d;
	text-align:center;
	padding:8px 0;
	font-size:1.0em;
}
.check{
  background-image:url(../images/choose_pressed.png);
  background-repeat:no-repeat;
}
.scenery{
	position:absolute; 
	width:100%; 
	top:36%;
	height:60%;
}
.scenery div{
	position:absolute;
}

.detail{
	position:fixed; 
	bottom:0; 
	left:0;
	max-height:75%;
	width:100%;
	/*overflow-y: auto;*/
	display:none;
}

.closeBg{
	background-image: url(../images/detailBg.png); 
	background-repeat:repeat-y; 
	background-size:100% auto;
	text-align:right;
    margin: -4px auto;
}
.close{
	margin:0px 20px 8px 0;
	width:86px;
}

.content{
	background-image:url(../images/middle.png); 
	background-repeat:repeat-y; 
	background-size:100% auto;
	font-family:"Microsoft Yahei";
	font-size:1em;
	color:#695232;
	padding:0px 5% ;
	overflow-y:auto;
    margin: -4px auto;
}
.title{
	color:#453827;
	font-size:1.2em;
	line-height:2em;
}
.down{
	 overflow:hidden; 
	 padding-bottom:8px;
}


.radius{
	border-radius:6px;
	-webkit-border-radius:6px;
}

#mask{
	position: fixed;
	z-index:99;
	left:0;
	top:0;
	width:100%;
	background-color:#000;
	filter:alpha(opacity=50); 
	opacity:0.5;
	display:none;
}
.pt-page-moveFromBottom {
    -webkit-animation: moveFromBottom .6s ease both;
    animation: moveFromBottom .6s ease both;
}
@-webkit-keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); transform: translateY(100%); }
}
.pt-page-moveToBottom {
    -webkit-animation: moveToBottom .6s ease both;
    animation: moveToBottom .6s ease both;
}
@-webkit-keyframes moveToBottom {
    from { -webkit-transform: translateY(-100%); }
}
@keyframes moveToBottom {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}


@media screen and (max-width: 480px) {
	.mapbg{width:100%;}
    .list0{top:80%; left:20%;}
    .list0 img{width:118px;}
	.list1{top:2%; right:5%;}
	.list1 img{width:118px;}
	.list2{top:24%; right:1%;}
	.list2 img{width:78px;}
	.list3{top:28%; left:12%;}
	.list3 img{width:83px;}
	.list4{top:32%; right:7%;}
	.list4 img{width:105px;}
	.list5{top:36%; left:15%;}
	.list5 img{width:76px;}
	.list6{top:36%; right:23%;}
	.list6 img{width:76px;}
	.list7{top:48%; left:15%;}
	.list7 img{width:75px;}
	.list8{top:48%; right:20%;}
	.list8 img{width:84px;}
	.list9{top:58%; left:15%;}
	.list9 img{width:76px;}
	.list10{top:58%; right:20%;}
	.list10 img{width:87px;}
	.list11{top:68%; right:20%;}
	.list11 img{width:82px;}
	.list12{top:73%; left:23%;}
	.list12 img{width:25px;}
	.list13{top:73%; right:31%;}
	.list13 img{width:27px;}
	.list14{top:27%; right:21%;}
	.list14 img{width:84px;}
	.list15{top:68%; left:13%;}
	.list15 img{width:84px;}
    .list16{top:94%; left:32%;}
    .list16 img{width:84px;}
	.close{
		margin:0px 20px 8px 0;
		width:43px;
	}
	.icon{ 
		width:73px;
	}
	.downBtn{
		width:43px;
	}
}
@media screen and (min-width: 481px) and (max-width: 640px)  {
	.mapbg{width:100%;}
	.list1{top:3%; right:20%;}
	.list2{top:24%; right:5%;}
	.list3{top:29%; left:18%;}
	.list4{top:32%; right:14%;}
	.list5{top:36%; left:19%;}
	.list6{top:36%; right:27%;}
	.list7{top:49%; left:19%;}
	.list8{top:49%; right:25%;}
	.list9{top:59%; left:18%;}
	.list10{top:59%; right:24%;}
	.list11{top:68%; right:25%;}
	.list12{top:77%; left:24%;}
	.list13{top:77%; right:32%;}
	.list14{top:28%; right:25%;}
	.list15{top:68%; left:17%;}
    .list16{top:95%; left:35%;}
	.list1 img{width:118px;}
	.list2 img{width:78px;}
	.list3 img{width:83px;}
	.list4 img{width:105px;}
	.list5 img{width:76px;}
	.list6 img{width:76px;}
	.list7 img{width:75px;}
	.list8 img{width:84px;}
	.list9 img{width:76px;}
	.list10 img{width:87px;}
	.list11 img{width:82px;}
	.list12 img{width:25px;}
	.list13 img{width:27px;}
	.list14 img{width:84px;}
	.list15 img{width:84px;}
    .list16 img{width:118px;}
	.close{
		margin:0px 20px 8px 0;
		width:43px;
	}
	.icon{ 
		width:73px;
	}
	.downBtn{
		width:43px;
	}
}
@media screen and (min-width: 641px) and (max-width: 768px)  {
	.mapbg{width:100%;}
	.list1{top:1%; right:3%;}
	.list2{top:24%; right:0%;}
	.list3{top:28%; left:10%;}
	.list4{top:32%; right:5%;}
	.list5{top:36%; left:11%;}
	.list6{top:36%; right:19%;}
	.list7{top:49%; left:11%;}
	.list8{top:49%; right:16%;}
	.list9{top:59%; left:11%;}
	.list10{top:59%; right:15%;}
	.list11{top:68%; right:14%;}
	.list12{top:73%; left:23%;}
	.list13{top:73%; right:31%;}
	.list14{top:27%; right:17%;}
	.list15{top:68%; left:9%;}
    .list16{top:95%; left:35%;}
}
@media screen and (min-width: 769px) and (max-width: 840px)  {
	.mapbg{width:100%;}
	.list1{top:1%; right:11%;}
	.list2{top:24%; right:1%;}
	.list3{top:28%; left:13%;}
	.list4{top:32%; right:8%;}
	.list5{top:36%; left:14%;}
	.list6{top:36%; right:23%;}
	.list7{top:49%; left:14%;}
	.list8{top:49%; right:20%;}
	.list9{top:59%; left:14%;}
	.list10{top:59%; right:19%;}
	.list11{top:68%; right:18%;}
	.list12{top:73%; left:23%;}
	.list13{top:73%; right:31%;}
	.list14{top:27%; right:22%;}
	.list15{top:68%; left:12%;}
    .list16{top:95%; left:35%;}
}
@media screen and (min-width: 841px) and (max-width: 930px)  {
	.mapbg{width:100%;}
	.list1{top:1%; right:13%;}
	.list2{top:24%; right:2%;}
	.list3{top:28%; left:14%;}
	.list4{top:32%; right:10%;}
	.list5{top:36%; left:16%;}
	.list6{top:36%; right:25%;}
	.list7{top:49%; left:16%;}
	.list8{top:49%; right:22%;}
	.list9{top:59%; left:16%;}
	.list10{top:59%; right:21%;}
	.list11{top:68%; right:20%;}
	.list12{top:73%; left:23%;}
	.list13{top:73%; right:31%;}
	.list14{top:28%; right:23%;}
	.list15{top:68%; left:14%;}
    .list16{top:95%; left:36%;}
}
@media screen and (min-width: 931px) and (max-width: 1024px)  {
	.mapbg{width:100%;}
	.list1{top:1%; right:15%;}
	.list2{top:24%; right:3%;}
	.list3{top:28%; left:16%;}
	.list4{top:32%; right:12%;}
	.list5{top:36%; left:18%;}
	.list6{top:36%; right:26%;}
	.list7{top:49%; left:18%;}
	.list8{top:49%; right:24%;}
	.list9{top:59%; left:18%;}
	.list10{top:59%; right:23%;}
	.list11{top:68%; right:22%;}
	.list12{top:73%; left:23%;}
	.list13{top:73%; right:31%;}
	.list14{top:28%; right:25%;}
	.list15{top:68%; left:17%;}
    .list16{top:95%; left:37%;}
    .list16 img{width: 183px}
}
@media screen and (min-width: 1025px){
	.bg{position: relative;width: 640px;margin: 0 auto;}
	.mapbg{width:100%;}

	.list1{top:1%; right:3%;}
	.list2{top:24%; right:0%;}
	.list3{top:28%; left:10%;}
	.list4{top:32%; right:5%;}
	.list5{top:36%; left:11%;}
	.list6{top:36%; right:19%;}
	.list7{top:49%; left:11%;}
	.list8{top:49%; right:16%;}
	.list9{top:59%; left:11%;}
	.list10{top:59%; right:15%;}
	.list11{top:68%; right:14%;}
	.list12{top:73%; left:23%;}
	.list13{top:73%; right:31%;}
	.list14{top:27%; right:18%;}
	.list15{top:68%; left:9%;}
    .list16{top:94%; left:33%;}
	
	.detail{
		position:fixed; 
		bottom:0; 
		left:50%;
		max-height:60%;
		max-width:640px;
		/*overflow-y: auto;*/
		display:none;
		margin-left: -320px;
	}
}


